<script setup lang="ts">
import { useCounterStore } from '@/store/counter'
import { getCaptcha, loginApi } from '@/api/auth/index'
import { LoginData } from '@/api/auth/types'
import { setToken } from '@/utils/auth'
const counterStore = useCounterStore()

const loginData = reactive<LoginData>({
	username: '',
	password: '',
})
const loginClick = async () => {
	const res = await loginApi(loginData)
	if (res && res.accessToken) {
		setToken(res.accessToken)
		ElMessage.success('登录成功')
	} else {
		ElMessage.error('登录失败')
	}
	console.log('res', res)
}
</script>

<template>
	<el-card>
		<template #header> 子组件 HelloWorld.vue</template>
		<el-form>
			<el-form-item label="数字："> {{ counterStore.count }}</el-form-item>
			<el-form-item label="加倍："> {{ counterStore.double }}</el-form-item>
		</el-form>
	</el-card>
	<div>
		<el-input v-model="loginData.username" style="width: 240px" placeholder="Please input account" />
		<el-input v-model="loginData.password" style="width: 240px" placeholder="Please input pwd" />
		<el-button type="primary" @click="loginClick">Submit!</el-button>
	</div>
</template>

<style scoped>
.read-the-docs {
	color: #888;
}
</style>
